<template>
  <a-layout-header
    :style="{
      background: '#fff',
      padding: 0,
      height: 'auto',
      minHeight: '60px',
    }"
  >
    <div class="header-box">
      <div class="pages-title-box">
        <div class="back-button" v-if="subTitle && subTitle.length > 0">
          <a-button type="link" @click="handleBack" :icon="h(LeftOutlined)">返回</a-button>
        </div>
        <div
          class="pages-title"
          :class="{ cur: subTitle && subTitle.length > 0 }"
        >
          {{ title }}
        </div>
        <div class="sub-title" v-if="subTitle && subTitle.length > 0">
          <span v-for="(item, index) in subTitle" :key="index">{{ item }}</span>
        </div>
      </div>
      <div class="header-content">
        <div class="time-box">{{ fullDate }}</div>
        <!-- <div class="ai"></div> -->
        <!-- <div class="language-box" @click="handleChageLanguage">
          {{ language === "zh" ? "中文" : "English" }}
        </div> -->
        <div class="user-info">
          <div class="user-info-content"  @click.stop="handleToggle">
            <div class="user-img">
              <img :src="avatar_url" class="user-avatar" />

             
            </div>
            <div class="user-name">{{ userName }}</div>
            <div class="down-icon" :class="{'active':showDrap}"></div>
          </div>
          <div class="user-drap" v-if="showDrap">
            <div class="user-drap-item" @click="handleToHome">首页</div>
            <div class="user-drap-item" @click="handleToUser">个人信息</div>
            <div class="user-drap-item" @click="handleLoginOut">退出登录</div>
          </div>
        </div>
      </div>
    </div>
  </a-layout-header>
</template>
<script setup>
import { computed, ref,h } from "vue";
import { useGlobalStore } from "@/store/modules/global";
import { fullDate } from "@/utils/date";
import router from "@/routers";
import { LeftOutlined } from "@ant-design/icons-vue";
const globalStore = useGlobalStore();
const title = computed(() => globalStore.getTitle);
const language = ref("zh");
const subTitle = computed(() => globalStore.subTitle);
const handleChageLanguage = () => {
  if (language.value === "zh") {
    language.value = "en";
    (window).translate.changeLanguage("english");
  } else {
    language.value = "zh";
    (window).translate.changeLanguage("chinese_simplified");
  }
  (window).translate.execute(); // 执行翻译
};
const userName = computed(() =>  JSON.parse(localStorage.getItem("userInfo"))?.real_name);
const avatar_url = computed(() =>  JSON.parse(localStorage.getItem("userInfo"))?.avatar_url) || "./data/user-avatar.jpeg";
const showDrap = ref(false);
const handleToggle = () => {
  showDrap.value = !showDrap.value;
  //需要点击其他地方隐藏下拉框
  document.onclick = function (e) {
    if (!e.target.classList.contains("user-info-content")) {
      showDrap.value = false;
    }
  };
};
const handleBack = () => {
  router.go(-1);
};
const handleToUser = () => {
  console.log('to user info')
  router.push("/personal");
  showDrap.value = false;
};
const handleLoginOut = () => {
  showDrap.value = false;
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  localStorage.removeItem("role")
  window.location.reload();
};
const handleToHome = () => {
  showDrap.value = false;
  router.push("/index");
};
</script>
<style lang="less" scoped>
.header-box {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pages-title-box {
    display: flex;
    align-items: center;
  }
  .back-button {
    display: flex;
    align-items: center;
    margin-right: 12px;
    
  }
  .pages-title {
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    font-size: 18px;
    color: #262626;
    line-height: 24px;
    padding: 8px 0;
    &.cur {
      font-weight: 400;
      font-size: 14px;
      color: #262626;
      line-height: 24px;
    }
  }
  .sub-title {
    span {
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      font-size: 18px;
      color: #262626;
      line-height: 24px;
      &::before {
        content: "/";
        font-family: PingFangSC-Semibold;
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        line-height: 24px;
        margin-right: 4px;
      }
    }
  }
  .header-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .time-box {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #595959;
      line-height: 24px;
      margin-right: 26px;
    }
    .ai {
      width: 36px;
      height: 36px;
      background: #ffffff url("@/assets/icon-ai.png") no-repeat center;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      margin-right: 22px;
      cursor: pointer;
    }
    .language-box {
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      margin-right: 22px;
      height: 24px;
      line-height: 24px;
      padding: 0 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 12px;
      cursor: pointer;
    }
    .user-info {
      padding-right: 10px;
      cursor: pointer;
      position: relative;
      .user-info-content {
        display: flex;
        align-items: center;
      }
       .user-drap {
        position: absolute;
        top: 40px;
        right: 0;
        width: 126px;
        height: 136px;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        box-shadow: 0 2px 20px 0 #0050cb14;
        border-radius: 8px;
        padding: 8px;
        box-sizing: border-box;
        z-index: 1001;
        .user-drap-item {
          width: 110px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #262930;
          &:hover {
            background: #e3edff;
            color: #276bf0;
          }
        }
      }
      .user-img {
        width: 32px;
        height: 32px;
        position: relative;
        margin-right: 12px;
        border-radius: 50%;
        background: #e1e1e1;
        .user-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          vertical-align: top;
        }
        .vip {
          position: absolute;
          bottom: 0;
          right: 0;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 12px;
          color: #fff;
          z-index: 2;
          width: 16px;
          text-align: center;
          line-height: 18px;
        }
        .vip-bg {
          position: absolute;
          bottom: 0;
          z-index: 1;

          right: 0;

          width: 16px;
          height: 16px;
          background: #fc7934;
          transform: rotate(45deg);
        }
      }
      .user-name {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
        color: #262626;
        line-height: 20px;
      }
      .down-icon {
        width: 20px;
        height: 20px;
        background: url("@/assets/icon-down.png") no-repeat center;
        transition: all 0.3s;
        &.active {
          transform: rotate(180deg);
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    flex-direction: column;
    padding-bottom: 10px;
    .pages-title {
      text-align: center;
    }
    .header-content {
      justify-content: flex-end;
      .language-box {
        margin-right: 0;
      }
      .user-info {
        margin-top: 8px;
      }
    }
  }
}
</style>
